<template>
	<view class="page-container">
		<my-info class="my-info" :username="userData.username" :email="userData.email" :gender="userData.gender"
			:phone="userData.phone" :avatarUrl="userData.avatarUrl"></my-info>

		<!-- 服务卡片部分 -->
		<view class="service-card-container" v-if="isLogin">
			<el-card shadow="never" class="service-card">

				<div class="service-item" @click="handleFavorite">
					<el-icon :size="20" color="#FFBA00">
						<Star />
					</el-icon>
					<text>收藏景点</text>
				</div>
				<div class="divider"></div>


				<div class="service-item" @click="handleChangePassword">
					<el-icon :size="20" color="#666">
						<Setting />
					</el-icon>
					<text>修改密码</text>
				</div>

				<!-- 项目后续设置功能较多时使用设置集成 -->
				<!-- <div class="divider"></div>
				<div class="service-item" @click="handleSettings">
					<el-icon :size="20" color="#666">
						<Setting />
					</el-icon>
					<text>设置</text>
				</div> -->
			</el-card>
		</view>


		<!-- 固定在底部的注销按钮 -->
		<view class="bottom-logout">
			<el-button v-if="!isLogin" type="success" @click="confirmLogin" class="long-logout-btn">
				登录
			</el-button>

			<el-button v-if="isLogin" type="danger" @click="confirmLogout" class="long-logout-btn">
				退出登录
			</el-button>
		</view>

		<!-- 适配移动端的大号确认对话框 -->
		<el-dialog v-model="dialogVisible" title="退出登录确认" :width="dialogWidth" top="20vh" custom-class="mobile-dialog">
			<view class="dialog-content">
				<text class="dialog-text">确定要退出当前账号吗？</text>
			</view>
			<template #footer>
				<view class="dialog-footer">
					<el-button class="dialog-btn" @click="dialogVisible = false" size="large">
						取消
					</el-button>
					<el-button type="primary" class="dialog-btn" @click="logout" size="large">
						确定退出
					</el-button>
				</view>
			</template>
		</el-dialog>

	</view>
</template>

<script>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'; // 确保所有需要的Composition API都已导入
	import myInfo from './comment/myInfo.vue'; //个人信息页面
	import {
		Star,
		StarFilled,
		Setting
	} from '@element-plus/icons-vue';
	import {
		ElIcon,
		ElCard,
		ElButton,
		ElDialog
	} from 'element-plus';

	const dialogVisible = ref(false);

	const handleClose = (done) => {
		// 可以添加一些关闭前的处理
		done();
	};

	const confirmLogout = () => {

		dialogVisible.value = true;
	};

	export default {
		components: {
			'my-info': myInfo,
			Star,
			StarFilled,
			Setting,
			ElIcon,
			ElCard,
			ElButton,
			ElDialog
		},
		setup() {

			const screenWidth = ref(375); // 默认值

			// 计算对话框宽度（适配不同屏幕）
			const dialogWidth = computed(() => {
				return Math.min(screenWidth.value * 0.9, 400) + 'px';
			});

			// 获取屏幕宽度
			const getScreenSize = () => {
				try {
					const systemInfo = uni.getSystemInfoSync();
					screenWidth.value = systemInfo.windowWidth;
				} catch (e) {
					console.error('获取屏幕信息失败:', e);
				}
			};
			onMounted(() => {
				getScreenSize();
			});


			return {
				dialogVisible,
				dialogWidth,
				confirmLogout,
				// logout,
				handleClose
			};
		},
		data() {
			return {
				userData: {},
				isLogin: false,
			}
		},
		onLoad() {
			console.log('父组件onShow');
		},
		onShow() {
			this.loaddata()
		},
		methods: {
			loaddata() {
				// 获取 Cookie
				const cookieValue = uni.getStorageSync('LoginUser');
				if (!cookieValue) {
					console.log("父组件未登录！")
					this.isLogin = false;
					this.userData = {}
					return;
				} else {
					this.isLogin = true;
					// console.log("cookieValue", cookieValue)
					this.userData = cookieValue;
				}
			},

			//打开收藏列表
			handleFavorite() {
				console.log('打开收藏');
				if (uni.getStorageSync('LoginUser')) {
					uni.navigateTo({
						url: '/pages/attractionCollection/attractionCollection'
					});
				} else {
					// console.log("请先登录");
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
				}
			},
			//密码修改
			handleChangePassword() {
				console.log('打开密码修改');
				if (uni.getStorageSync('LoginUser')) {
					uni.navigateTo({
						url: '/pages/changePassword/changePassword'
					});
				} else {
					// console.log("请先登录");
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
				}
			},
			//点击登录
			confirmLogin() {
				// 跳转到登录页面
				uni.redirectTo({
					url: '/pages/login/login'
				});
			},
			logout() {
				dialogVisible.value = false;
				this.isLogin = false
				// 这里执行注销逻辑
				uni.removeStorageSync('LoginUser'); // 清除用户信息
				this.loaddata();

				uni.showToast({
					title: '已退出登录',
					icon: 'success'
				});
			}
		}
	}
</script>

<style>
	/* 新增移动端对话框样式 */
	:deep(.mobile-dialog) {
		border-radius: 16px !important;
	}

	:deep(.mobile-dialog .el-dialog__header) {
		padding: 24px 24px 10px;
		font-size: 18px !important;
		font-weight: bold;
		text-align: center;
	}

	:deep(.mobile-dialog .el-dialog__body) {
		padding: 15px 24px;
	}

	.dialog-content {
		text-align: center;
		padding: 10px 0;
	}

	.dialog-text {
		font-size: 16px;
		color: #333;
	}

	.dialog-footer {
		display: flex;
		justify-content: space-between;
		padding: 0 10px 15px;
	}

	:deep(.dialog-btn) {
		flex: 1;
		margin: 0 10px;
		height: 48px;
		font-size: 16px;
	}

	my-info {
		margin-top: 20px;
		/* 根据需要调整 */
	}


	.service-card {
		border-radius: 12px;
		border: none;
	}

	.service-item {
		display: flex;
		align-items: center;
		padding: 15px 20px;
		font-size: 17px;
	}

	.service-item text {
		margin-left: 10px;
	}

	.divider {
		height: 1px;
		background-color: #eee;
		margin: 0 15px;
	}

	.page-container {
		position: relative;
		min-height: 100vh;
		padding-bottom: 100px;
		/* 为底部按钮留出空间 */
	}

	.bottom-logout {
		position: fixed;
		bottom: 50px;
		/* 调整为TabBar高度+适当间距 */
		left: 0;
		right: 0;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.long-logout-btn {
		width: 100%;
		height: 48px;
		/* 增加高度 */
		font-size: 16px;
		/* 增大字体 */
		border-radius: 8px;
		/* 圆角 */
	}
</style>